<template>
  <div class="usage-guide">
    <div class="guide-header" @click="toggleGuide">
      <h3><slot name="title">{{ title }}</slot></h3>
      <el-icon class="toggle-icon" :class="{ 'is-open': isGuideOpen }"><ArrowDown /></el-icon>
    </div>
    <transition name="guide-toggle">
      <div class="guide-content" v-show="isGuideOpen">
        <slot name="content">
          <ol v-if="steps && steps.length">
            <li v-for="(step, index) in steps" :key="index">{{ step }}</li>
          </ol>
        </slot>
      </div>
    </transition>
  </div>
</template>

<script setup>
/**
 * 使用指南组件
 * 提供可折叠的使用步骤说明
 * 
 * @property {String} title - 指南标题
 * @property {Array} steps - 使用步骤列表
 * @property {Boolean} isOpen - 是否默认展开
 */
import { ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

const props = defineProps({
  title: {
    type: String,
    default: '使用说明'
  },
  steps: {
    type: Array,
    default: () => []
  },
  isOpen: {
    type: Boolean,
    default: false
  }
});

const isGuideOpen = ref(props.isOpen);

// 切换指南显示状态
const toggleGuide = () => {
  isGuideOpen.value = !isGuideOpen.value;
};
</script>

<style scoped>
.usage-guide {
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  overflow: hidden;
}

.guide-header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  background-color: var(--primary-color);
  color: var(--white);
}

.guide-header:hover {
  background-color: var(--primary-dark);
}

.guide-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.toggle-icon {
  transition: transform var(--transition-fast);
}

.toggle-icon.is-open {
  transform: rotate(180deg);
}

.guide-content {
  padding: 20px;
  background-color: var(--white);
  border: 1px solid var(--medium-gray);
  border-top: none;
}

.guide-content ol {
  margin: 0;
  padding-left: 20px;
}

.guide-content li {
  margin-bottom: 10px;
}

.guide-content li:last-child {
  margin-bottom: 0;
}

/* 折叠展开过渡效果 */
.guide-toggle-enter-active,
.guide-toggle-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 1000px;
  overflow: hidden;
}

.guide-toggle-enter-from,
.guide-toggle-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style> 